<template>
  <a-form class="top-query-form" ref="formRef">
    <a-row type="flex" :gutter="[32, 16]">
      <slot>
        <a-col :span="6">col-6</a-col>
        <a-col :span="6">col-6</a-col>
        <a-col :span="6">col-6</a-col>
      </slot>
      <slot name="extra" v-if="fold"></slot>
      <a-col flex="auto" class="top-query-form__last-options">
        <a-space>
          <a-button @click="onReset">重置</a-button>
          <a-button type="primary" @click="onQuery" :loading="loading"
            >查询</a-button
          >
          <a-button v-if="$slots.extra" type="link" @click="fold = !fold">
            <span>{{ fold ? '收起' : '展开' }}</span>
            <UpOutlined :rotate="fold ? 0 : 180" />
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import { ref } from 'vue'

withDefaults(defineProps<{ loading?: boolean }>(), {
  loading: false,
})

const emit = defineEmits<{
  (e: 'resetForm', formRef: Ref): void
  (e: 'query', formRef: Ref): void
}>()

const fold = ref(false)
const formRef = ref()
const onReset = () => emit('resetForm', formRef)
const onQuery = () => emit('query', formRef)
</script>

<style lang="scss" scoped>
@include b(top-query-form) {
  @include e(last-options) {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss">
.top-query-form {
  .ant-form-item {
    margin-bottom: 0px;
  }
}
</style>
